<template>
  <div class="reCharge-box">
    <div class="reChargeHeader">
      <p class="text-box">
        <span>计费 / </span>
        <span class="text">充值记录</span>
        <span> - 展示当前账户的消息额度的所有充值记录。</span>
      </p>
      
  </div>

  <el-card class="box-card mt-20">
    <template #header>
      <div class="card-header">
        <div class="demo-date-picker">

        <div class="block">
          <span class="demonstration">月份选择：</span>
          <el-date-picker
            v-model="monthValue"
            @change="changeMonth"
            type="month"
            placeholder="选择月"
          />
          <el-button type="primary" text bg class="ml-10" @click="clickExport">导出数据</el-button>
        </div>

</div>
        <!-- <el-button class="button" text>Operation button</el-button> -->
      </div>
    </template>

   <el-table :data="rechargeList"  stripe class="table-box minh-500">
    <el-table-column  align="center" type="index" label="序号" width="100" />
    <el-table-column align="center" prop="id"  label="充值ID" />
      <el-table-column align="center" prop="cTime" :formatter="fcDate" label="日期" />
      <el-table-column align="center" prop="amount" label="充值金额" />
      <el-table-column align="center" prop="desc" label="备注" />
    </el-table>

    <div class="pagination-box flex jc-c aic">
      <el-pagination class="pagination" background layout="prev, pager, next" :current-page="cPage"  @current-change="cpageChang" :total="totalRecharge" :page-size="10" />
    </div>
    
  </el-card>
     
  </div>
</template>

<script setup>

  import {onMounted, ref,inject} from 'vue';
  import * as api from '@/api/index'

//从公共方法获取格式化时间
  const {fcDate,timestampToTime} = inject("utils");

  //渲染列表
  let rechargeList = ref([]);
  //有多少数据
  let totalRecharge = ref([]);
  //获取分页
  let cPage = ref(1);
  //页数改变
  const cpageChang = (p)=>{ 
    cPage.value = p;
    getReChargeList(cPage.value);
  }


  //获取列表
  const getReChargeList = (cp,date='')=>{
      let data = {
        currPage:cp,
        pageSize:10,
        date:date
      }
      api.$feeRechargeList(data).then(res=>{
        console.log(res);
        totalRecharge.value = res.total;
        rechargeList.value = res.data;
      })
  }
  //记录月份
  const monthValue = ref('')
  const changeMonth = ()=>{
    let date = new Date(monthValue.value)
    let dateStr = date.getFullYear()+'-'+(date.getMonth()+1)
    // console.log(dateStr)
    cPage.value = 1;
    getReChargeList(1,dateStr);
  }
  //点击导出数据
  const clickExport = ()=>{
    console.log(res);
  }

  onMounted(()=>{
      getReChargeList(1)
  })
</script>

<style lang="less" scoped>
.reCharge-box{
  margin: 15px;
  font-size: 16px;
  position: relative;

  .reChargeHeader{
    background-color: #fff;
    padding: 15px;
    .text-box {
      .text {
        font-weight: bold;
      }
    }
  }


 
}

</style>